<template>
	<view class="card_box">
		<view class="con_box">
			<view class="con_img">
				<image :src="myUser.HeadImg" mode=""></image>
			</view>
			<view class="sun_text">
				<view class="one">
					<view class="name">{{myUser.Name}}</view>
					<view class="type">游客</view>
				</view>
				<view class="two qxlj_color"></view>
			</view>
		</view>
		<view class="card_content">
			<view class="" style="text-align: center;margin-top: 10%;margin-bottom: 5%;" v-if="!goShow"
				@click="goTicket">
				{{textQrCode}}
			</view>
			<view class="" style="text-align: center;margin-top: 10%;margin-bottom: 5%;color: #498FFF;" v-if="goShow"
				@click="goTicket">
				{{textQrCode}}
			</view>
			<view class="" style="width: 200px;height: 200px;margin: 0 auto;">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 100%;height: 100%;"></canvas>
			</view>
			<!-- <view style="text-align: center;font-size: 14px;margin-top: 5%;">二维码每隔30S自动刷新</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getThisDetail
	} from '@/api/qxlj.js';
	import UQRCode from "uqrcodejs"
	import {
		getUserOrderList,
	} from '@/api/mall.js'
	export default {
		data() {
			return {
				myUser: '', //个人信息
				textQrCode: '出示二维码进行入园核销',
				goShow: false,
			}
		},
		onLoad() {
			this.getUserCenter();
			this.getUserOrderList();
		},
		methods: {
			goTicket() {
				if (this.goShow) {
					uni.redirectTo({
						url: '/pages/center/index?index=2'
					})
				}
			},
			// 获取票务订单待使用列表数据
			async getUserOrderList() {
				try {
					const {
						Data
					} = await getUserOrderList({
						index: 1,
						size: 1,
						TypeArr: '15,20',
						IsOnline: 1
					});

					if (Data.length === 0) {
						this.textQrCode = '暂无票务信息,请点击前往购票';
						this.goShow = true;
						return; // 直接返回，避免后续无效处理
					}
					// 使用 flags 来控制二维码文本
					let hasValidOrder = false;
					// 遍历订单
					Data.forEach(item => {
						// 使用 some 方法检查 OrdersOnlineInfoViewList
						hasValidOrder = item.OrdersOnlineInfoViewList.some(res => {
							console.log(res.ProductTags);
							// 检查 Tag 和 Code 条件
							if (['11'].includes(res.ProductTags) && res.Code.includes("OrdersInfo")) {
								this.goShow = false;
								this.textQrCode = '出示二维码进行入园核销';
								this.loadQRCode(res.Code); // 加载二维码
								return true; // 找到符合条件的，终止循环
							}
							return false; // 不符合条件
						});
					});

					// 如果没有有效的订单，则更新提示信息
					if (!hasValidOrder) {
						this.textQrCode = '暂无票务信息,请点击前往购票';
						this.goShow = true;
					}

				} catch (e) {
					// 处理异常
					this.textQrCode = '暂无票务信息,请点击前往购票';
					this.goShow = true;
				}
			},
			loadQRCode(QrCode) {
				console.log(QrCode)
				const code = QrCode;
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = code;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			async getUserCenter() {
				try {
					const {
						Data
					} = await getThisDetail({});
					console.log(Data)
					if (Data.HeadImg.includes('thirdwx.qlogo')) {
						Data.HeadImg = '../../static/userimg/tx.png';
					}
					if (Data.Name == "微信昵称") {
						Data.Name = '游客'
					}
					this.myUser = Data;
					console.log(this.myUser)
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.card_box {
		width: 100vw;
		height: 100vh;
		padding: 0 4vw;
		background-image: url('https://wzws.wanshanlundiao.cn/upload/img/20250331/202503311833585007.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.card_content {
			overflow: hidden;
			width: 100%;
			margin: 0 auto;
			height: 45%;
			background-color: #fff;
			border-radius: 7%;
			margin-top: 13%;
		}

		//顶部内容
		.con_box {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 2%;
			margin-top: 20%;

			.con_img {
				width: 130rpx;
				height: 130rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.sun_text {
				width: 50%;
				margin-left: 3%;

				.one {
					display: flex;
					align-items: center;

					.name {
						color: #333333;
						font-weight: bold;
						font-size: 18px;
					}

					.type {
						background: #498FFF;
						color: #fff;
						padding: 2%;
						font-size: 10px;
						width: 45px;
						text-align: center;
						margin-left: 2%;
						border-radius: 27px 27px 27px 27px;
					}
				}

				.two {
					font-size: 24rpx;
					margin-top: 2%;
					height: 16px;
				}
			}

			.sz_img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 4%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>